<template>
  <div>
    <h2>自定义栅栏</h2>
    <my-row :gutter="10">
      <my-col :span="6" :xs="24" :lg="2" :pull="1">
        <div class="bg-block bg-purple"></div>
      </my-col>
      <my-col :span="6" :xs="24" :lg="4">
        <div class="bg-block bg-purple-light"></div>
      </my-col>
      <my-col :span="6" :xs="24" :lg="4">
        <div class="bg-block bg-purple"></div>
      </my-col>
      <my-col :span="6" :xs="24" :lg="2" :push="1">
        <div class="bg-block bg-purple-light"></div>
      </my-col>
    </my-row>
    <my-row>
      <my-col :span="6" :xs="24" :md="{ span: 1 , push: 3, pull: 3 }" :lg="4">
        <div class="bg-block bg-purple-light"></div>
      </my-col>
    </my-row>
    <my-row type="flex" justify="center" align="center" tag="p">
      <my-col :span="6" tag="span">
        <div class="bg-block bg-purple"></div>
      </my-col>
    </my-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// import { Row, Col } from '@/components/Grid'
// import { Row, Col } from 'xl-grid'
import { Row, Col } from 'alcyh'

@Component({
  name: 'GridPage',
  components: {
    'MyRow': Row,
    'MyCol': Col,
  },
})
export default class extends Vue {

}
</script>

<style lang="scss" scoped>
  h2 {
    margin-top: 20px;
    margin-bottom: 25px;
  }

  .bg-block {
    width: 100%;
    height: 35px;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }
</style>
